<template>
  <view class="page custom-page">
    <custom-head gradient back title="学生信息"></custom-head>
    <view class="information">
      <view class="touxiang-box flex col a-center j-center">
        <view class="touxiang"> <image :src="studentDetail.avatar" mode="widthFix"></image></view>
        <view class="infoText flex">
          <h4>{{ studentDetail.name }}</h4>
          <span>（学号{{ studentDetail.student_number }}）</span>
        </view>
      </view>
      <view class="card">
        <view class="card-item flex jlr a-center">
          <view class="label">学习状态：</view>
          <view class="value blue">{{ studentDetail.status }}</view>
        </view>
        <view class="card-item flex jlr a-center">
          <view class="label">积分余额：</view>
          <view class="value">{{studentDetail.integration}} <u-icon name="arrow-right" color="#8F9399" size="26"></u-icon> </view>
        </view>
        <view class="card-item flex jlr a-center">
          <view class="label">紧急联系人：</view>
          <view class="value">{{studentDetail.emergency_contact}}/{{studentDetail.emergency_contact_phone}} <i class="iconfont icon-dianhua1"></i> </view>
        </view>
        <view class="card-item flex jlr a-center">
          <view class="label">所在班级：</view>
          <view class="value">{{ studentDetail.cid }}</view>
        </view>
      </view>

      <view class="card-select flex a-center jlr" @tap="enter(`/pages/student/gift?id=${urlId}`)">
        <view class="flex a-center">
          <view class="icon i1"></view>
          <view class="label">礼品兑换</view>
        </view>
        <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
      </view>

      <view class="card-select flex a-center jlr" @tap="enter(`/pages/student/treasureBox?id=${urlId}`)">
        <view class="flex a-center">
          <view class="icon i2"></view>
          <view class="label">宝箱发放</view>
        </view>
        <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
      </view>

      <view class="card-select flex a-center jlr" @tap="enter(`/pages/home/honeIntegralDynamic?id=${urlId}`)">
        <view class="flex a-center">
          <view class="icon i3"></view>
          <view class="label">积分记录</view>
        </view>
        <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
      </view>
      <view class="button submit" @click="handleJump">积分发放</view>
    </view>
  </view>
</template>
<script>
import { getStudentDetail } from '../../api/modules/student'

export default {
  data() {
    return {
      studentDetail: {
        avatar: '../../static/img/avatar.png'
      },
      urlId: '', // url 中的id
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },

  onLoad(params) {
    this.urlId = params.id
    this._getStudentDetail(params.id)
  },

  methods: {
    enter(url) {
      uni.navigateTo({
        url: url
      })
    },
    handleJump() {
      let integral = getApp().globalData.glb_list.scoreList.filter(i => i.sid === this.glbId).map(i => ({...i, count: i.cnt, checked: false, icon: `${this.static_uri}${i.icon}`}))

      let arr = [this.studentDetail]

      let selectStudentList = arr.map(i => ({...i, integral})).map(i => ({...i, sum: i.integral.filter(j => j.checked).reduce((pre, cur) => pre + cur.cnt, 0)}))
      getApp().globalData.selectStudentList = selectStudentList

      uni.navigateTo({
        url: `/pages/home/reviseIntegralItem?id=${this.$route.query.id}`
      })
    },

    _getStudentDetail(id) {
      getStudentDetail(id).then((res) => {
        const { code } = res || {};
        if (code === 200) {
          this.studentDetail = {
            ...res.data,
            avatar: `${this.static_uri}${res.data.avatar}`,
            // status:  0学习, 1休学, 2停学
            status: res.data.status == 0? '学习' : res.data.status == 1? '休学' : '停学'
          }

          console.log('页面获取数据', res)
        }
      })
    }
  }
}
</script>
<style scoped>
.touxiang-box {
  padding: 40rpx 0;
  font-size: 30rpx;
}

.touxiang {
  width: 150rpx !important;
  height: 150rpx !important;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 25rpx;
}

.touxiang image {
  width: 100%;
  height: 100%;
}

.infoText h4 {
  font-size: 32rpx;
  color: #303133;
}
.infoText span {
  font-size: 24rpx;
  color: #303133;
  margin-left: 10rpx;
}
.card {
  background-color: #fff;
  padding: 40rpx 50rpx;
}
.card-item {
  font-size: 24rpx;
  color: #303133;
  padding: 20rpx 0;
}
.value {
  font-size: 28rpx;
}
.value i {
  font-size: 40rpx;
  margin-left: 10rpx;
}
.blue {
  color: #2979ff;
}
.card-select {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 30rpx 50rpx;
}
.card-select .icon {
  width: 98rpx;
  height: 98rpx;
  margin-right: 30rpx;
}
.card-select .icon.i1 {
  background: url('@/static/img/info01.png') no-repeat;
  background-size: 100% 100%;
}
.card-select .icon.i2 {
  background: url('@/static/img/info02.png') no-repeat;
  background-size: 100% 100%;
}
.card-select .icon.i3 {
  background: url('@/static/img/home10.png') no-repeat;
  background-size: 100% 100%;
}
.card-select .label {
  color: #040709;
  font-size: 30rpx;
}
.card-select:active {
  filter: brightness(90%);
}
.button {
  width: 686rpx;
  height: 88rpx;
  border-radius: 44rpx;
  margin: 80rpx 0 40rpx 0;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
  margin: auto;
  margin-top: 50rpx;
}
</style>
